<template>
  <div class="container">
    
    <h1 class="app-title">图书馆管理系统</h1>
    <section class="section">
      <BookSearch />
    </section>
    <section class="section">
      <BorrowManager />
    </section>
    <section class="section">
      <ViewQuery />
    </section>
  </div>
</template>

<script setup>
import BookSearch from './components/BookSearch.vue'
import BorrowManager from './components/BorrowManager.vue'
import ViewQuery from './components/ViewQuery.vue'
</script>

<style>
/* 全局样式 */
body {
  background: linear-gradient(135deg, #E0F2F1, #B2EBF2);
  background-attachment: fixed;
  margin: 0;
  padding: 0;
  font-family: '宋体', 'SimSun', 'Segoe UI', sans-serif;
  min-height: 100vh;
}

/* 主容器：水平居中 + 最大宽度限制 */
.container {
  max-width: 1200px; /* 限制最大宽度 */
  width: 100%;       /* 自动填充可用宽度 */
  margin: 10px 50px 20px 150px; /* 上下10px，左右50px */
  padding: 2rem;     /* 内边距 */
}
</style>

<style scoped>
/* 组件局部样式 */
.app-title {
  text-align: center;
  color: #00695C;
  margin: 2rem 0;
  font-size: 2.5rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 每个区块：背景 + 圆角 + 阴影 + 水平居中 */
.section {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 3rem;
  padding: 2.5rem;
  width: 100%;      /* 填充父容器宽度 */
}
</style>